<template>
  <div class="user-setting">
    <div class="user-setting__wrapper">
      <div class="user-setting__head">
        <p style="margin-left: 20px" @click="toUser">&lt 返回个人主页</p>
      </div>

      <div class="user-setting__view">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <div class="base-info">
              <div class="img">
                <img :src="form.headpic" alt="头像" />
                <div class="mask" @click="updateHeadpic">点击修改头像</div>
              </div>

              <div class="text">
                <el-form :model="form" label-width="120px">
                  <el-form-item label="昵称">
                    <el-input v-model="form.nickName" maxlength="10" show-word-limit />
                  </el-form-item>

                  <el-form-item label="性别">
                    <el-select v-model="form.gender" class="m-2" placeholder="Select" size="large">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                      />
                    </el-select>
                  </el-form-item>

                  <!-- <el-form-item label="自定义地址">
                    <el-input v-model="form.name">
                      <template #prepend>http://xuanxiaoqian.com/</template>
                    </el-input>
                  </el-form-item> -->

                  <el-form-item label="个人主页">
                    <el-input v-model="form.blogAddress" maxlength="100" show-word-limit />
                  </el-form-item>

                  <el-form-item label="个人介绍">
                    <el-input
                      v-model="form.summary"
                      type="textarea"
                      placeholder="你不是三言两语可介绍完的"
                      maxlength="100"
                      show-word-limit
                    />
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存修改</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账号设置" name="second">账号设置</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import router from '/@/router'

import { userHomeSettingsMeta, userHomeSettingsUpdate } from '/@/api/users/usersHome'

import { imagesUpload } from '/@/api/utils/imagesUpload'
import { userHomeAddress } from '/@/api/users/usersActive'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {}

const options = [
  {
    value: '0',
    label: '未知',
    disabled: true
  },
  {
    value: '1',
    label: '男'
  },
  {
    value: '2',
    label: '女'
  }
]

let form = ref({
  nickName: '',
  gender: '',
  blogAddress: '',
  summary: '',
  headpic: ''
})

const onSubmit = () => {
  userHomeSettingsUpdate(SettingsMeatData.value).then((res) => {
    if (res.data) {
      alert('修改成功')
      router.go(0)
    }
  })
}

const toUser = () => {
  let userId = localStorage.getItem('userId')
  userHomeAddress(userId).then((res) => {
    router.push(`/user/${res.data}`)
  })
}

interface dataType {
  userId: number // 用户Id
  nickName: string // 用户昵称
  headpic: string // 用户头像地址
  summary: string // 自我简介

  blogAddress: string // 个人主页地址
  email: string //  邮箱地址
  gender: string // 性别(1:男 2:女)
  homeAddress: string // 自定义访问链接

  mobilePhone: string // 手机号码
  qqNumber: string // QQ号码
  registerTime: string // 注册时间
  userName: string // 用户名
  weChat: string // 微信
}

let SettingsMeatData = ref<dataType>()

let userId = localStorage.getItem('userId')
userHomeSettingsMeta(userId).then((res) => {
  SettingsMeatData.value = res.data
  form.value = res.data
})

const updateHeadpic = () => {
  //创建上传文件标签
  let eInputFile: any = document.createElement('input')
  eInputFile.setAttribute('type', 'file')
  eInputFile.setAttribute('name', 'certificate')
  eInputFile.setAttribute('accept', '.jpg, .jpeg, .png')

  //监听上传事件
  eInputFile.addEventListener('change', function (oEvent: any) {
    let eInputFile = oEvent.target
    let oFile = eInputFile?.files[0]

    //创建表单对象
    let oFormData = new FormData()
    //将上传的文件加入到表单对象
    oFormData.append('file', oFile)

    imagesUpload(oFormData).then((res) => {
      form.value.headpic = res.data
    })
  })

  //创建上传事件
  let eMouseEvent = new MouseEvent('click')
  //自动触发上传事件
  eInputFile.dispatchEvent(eMouseEvent)
}
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  user-select: none; /** 无效 */
}

.user-setting {
  width: 100%;
  height: calc(100vh - 60px);

  overflow: hidden;

  background-color: #f1f2f9;

  &__wrapper {
    width: 1100px;
    height: 690px;

    margin: 28px auto;

    // background-color: white;

    .user-setting__head {
      width: 100%;
      height: 45px;

      background-color: white;

      display: flex;

      align-items: center;

      color: #909090;
      cursor: pointer;

      font-size: 14px;

      &:hover {
        color: #1d7dfa;
      }
    }

    .user-setting__view {
      width: 100%;
      height: 626px;

      box-sizing: border-box;

      padding: 10px;

      margin-top: 20px;

      background-color: white;

      .base-info {
        .img {
          position: relative;
          padding: 0;
          width: 120px;
          height: 120px;

          margin: 0 auto;
          img {
            width: 120px;
            height: 120px;

            border-radius: 50%;

            cursor: pointer;
          }

          .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.3);
            color: #f5f1e5;

            cursor: pointer;

            opacity: 0;

            text-align: center;

            line-height: 120px;
            &:hover {
              opacity: 1;
            }
          }
        }

        .text {
          margin: 20px auto;

          width: 500px;
        }
      }
    }
  }
}
</style>
